<!-- 网端监控详情 -->
<template>
	<div class="app-container segment-overview-container">
		<!-- 搜索条件 -->
		<yd-form style="margin-bottom: 20px" :model="formData" :options="formOptions" @form-init="formInit" @search="formInit">
			<template #form-btn>
				<el-button type="primary" @click="searchHandler">查询</el-button>
			</template>
		</yd-form>

		<!-- 网端总览路径图 -->
		<el-row v-loading="loading.segmentOverviewItRoad" class="road-container">
			<el-col :span="24">
				<yd-it-road
					ref="ydItRoadRef"
					:config="{
						type: 'SegmentOverview',
						canvasHeight: 600,
						noDataFlag: false,
						customOptions: itRoad.customOptions,
					}"
					@dblclickNode="dblclickNode"
					@dragNode="updateSegmentPos"
					@graphInited="graphInited"
				></yd-it-road>
			</el-col>
		</el-row>

		<!-- 组件详情 -->
		<yd-card style="margin-bottom: 10px">
			<div class="yd-card-header yd-flex">
				<div class="yd-flex1">
					<div class="yd-circle"></div>
					<span class="yd-card-title">组件详情</span>
					<span style="margin-left: 10px">
						<el-tooltip effect="light" placement="top-start" style="z-index: 999">
							<template #content>
								<div>告警请求量:为产生告警的请求数量,一个告警请求存在对应多个告警情况</div>
								<div>失败请求量:为业务请求的数量,存在产生告警,但业务成功情况</div>

								<div>成功率计算:(请求量-失败请求量)/请求量</div>

								<div>健康度计算:(请求量-告警请求量)/请求量</div>
							</template>

							<svg-icon icon-class="question" style="color: #fff"></svg-icon>
						</el-tooltip>
					</span>
				</div>
				<div class="table-export-btn">
					<el-button type="text" :disabled="disable.componentExportDisable" :loading="loading.componentExportLoading" @click="handleComponentExport">
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</div>
			</div>
			<YdTable
				:formData="formData"
				:tableConfig="componentConfig"
				:tableData="componentData.data"
				@sizeChangeHandler="queryComponentDetail"
				@currentChangeHandler="queryComponentDetail"
				@sortChangeHandler="queryComponentDetail"
			></YdTable>
		</yd-card>
		<!-- 网络详情  -->
		<yd-card style="margin-bottom: 10px">
			<div class="yd-card-header yd-flex">
				<div class="yd-flex1">
					<div class="yd-circle"></div>
					<span class="yd-card-title">网络详情</span>
				</div>
				<!-- <div class="table-export-btn">
					<el-button
						type="text"
						:disabled="disable.networkDetailExportDisable"
						:loading="loading.networkDetailExportLoading"
						@click="handleNetworkDetailExport"
					>
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</div> -->
			</div>
			<YdTable
				:formData="formData"
				:tableConfig="networkDetailConfig"
				:tableData="networkDetailData.data"
				@sizeChangeHandler="queryNetworkDetail"
				@currentChangeHandler="queryNetworkDetail"
				@sortChangeHandler="queryNetworkDetail"
			></YdTable>
		</yd-card>
		<!-- 网元详情  -->
		<yd-card style="margin-bottom: 10px">
			<div class="yd-card-header yd-flex">
				<div class="yd-flex1">
					<div class="yd-circle"></div>
					<span class="yd-card-title">网元详情</span>
					<div style="margin-left: 30px">
						<span>CPU使用率历史峰值：{{ networkMetaDataPeek?.cpuRate }}%</span>
						<span style="margin: 0 20px">内存使用率历史峰值：{{ networkMetaDataPeek?.memoryRate }}%</span>
						<span>磁盘IO历史峰值：{{ networkMetaDataPeek?.diskRate }}%</span>
					</div>
				</div>
				<div class="table-export-btn">
					<el-button
						type="text"
						:disabled="disable.networkMetaDataDetailExportDisable"
						:loading="loading.networkMetaDataDetailExportLoading"
						@click="handleNetworkMetaDataDetailExport"
					>
						<svg-icon icon-class="daochu" class="icon-cls"></svg-icon>
					</el-button>
				</div>
			</div>
			<YdTable
				:formData="formData"
				:tableConfig="networkMetaDataDetailConfig"
				:tableData="networkMetaDataDetailData.data"
				@sizeChangeHandler="queryNetworkMetaDataDetail"
				@currentChangeHandler="queryNetworkMetaDataDetail"
				@sortChangeHandler="queryNetworkMetaDataDetail"
			></YdTable>
		</yd-card>

		<!-- 网端指标趋势图 -->
		<el-row v-loading="loading.segmentIndicatorTrendChart" :gutter="10" style="margin-bottom: 10px">
			<el-col :span="12">
				<!-- 请求量(总数) -->
				<div class="component-box">
					<div class="system-health-title" style="margin-top: 10px">
						<div class="circle"></div>
						<span class="title-label">请求量(总数)</span>
						<span style="margin-left: 10px">
							<el-tooltip effect="light" placement="top-start" style="z-index: 999">
								<template #content>
									说明：数据来源于系统网端趋势统计任务，只展示统计任务完成最新时间的数据。
									<br />如统计任务停止或者异常未继续执行，趋势图只会展示最近完成统计任务时间的数据，则趋势图展示的时间不再增加。
									<br />趋势图固定为10分钟一个数据点，不足10分钟的查询时间则取舍展示。 <br />趋势图数据为网端下所有组件10分钟内值的总数/平均值。
								</template>
								<svg-icon icon-class="question" style="color: #fff"></svg-icon>
							</el-tooltip>
						</span>
					</div>
					<div id="reqCountTrendChartId" style="height: 250px"></div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="component-box">
					<div class="system-health-title" style="margin-top: 10px">
						<div class="circle"></div>
						<span class="title-label">平均响应时长(毫秒)</span>
						<span style="margin-left: 10px">
							<el-tooltip effect="light" placement="top-start" style="z-index: 999">
								<template #content>
									说明：数据来源于系统网端趋势统计任务，只展示统计任务完成最新时间的数据。
									<br />如统计任务停止或者异常未继续执行，趋势图只会展示最近完成统计任务时间的数据，则趋势图展示的时间不再增加。
									<br />趋势图固定为10分钟一个数据点，不足10分钟的查询时间则取舍展示。 <br />趋势图数据为网端下所有组件10分钟内值的总数/平均值。
								</template>
								<svg-icon icon-class="question" style="color: #fff"></svg-icon>
							</el-tooltip>
						</span>
					</div>
					<div id="avgResponseTimeTrendChartId" style="height: 250px"></div>
				</div>
			</el-col>
		</el-row>
		<el-row v-loading="loading.segmentIndicatorTrendChart" :gutter="10" style="margin-bottom: 10px">
			<el-col :span="12">
				<div class="component-box">
					<div class="system-health-title" style="margin-top: 10px">
						<div class="circle"></div>
						<span class="title-label">失败请求量(总数)</span>
						<span style="margin-left: 10px">
							<el-tooltip effect="light" placement="top-start" style="z-index: 999">
								<template #content>
									说明：数据来源于系统网端趋势统计任务，只展示统计任务完成最新时间的数据。
									<br />如统计任务停止或者异常未继续执行，趋势图只会展示最近完成统计任务时间的数据，则趋势图展示的时间不再增加。
									<br />趋势图固定为10分钟一个数据点，不足10分钟的查询时间则取舍展示。 <br />趋势图数据为网端下所有组件10分钟内值的总数/平均值。
								</template>
								<svg-icon icon-class="question" style="color: #fff"></svg-icon>
							</el-tooltip>
						</span>
						<div class="table-export-btn">
							<el-button
								v-show="!noDataFlag.failReqCount"
								type="text"
								style="float: right; margin-right: 100px; color: #ffffff"
								@click="targetToFailReqCountDetail"
							>
								查看详情
								<el-icon :size="14"><ArrowRight /></el-icon>
							</el-button>
						</div>
					</div>
					<div id="failReqCountTrendChartId" style="height: 250px"></div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="component-box">
					<div class="system-health-title" style="margin-top: 10px">
						<div class="circle"></div>
						<span class="title-label">告警请求量(总数)</span>
						<span style="margin-left: 10px">
							<el-tooltip effect="light" placement="top-start" style="z-index: 999">
								<template #content>
									说明：数据来源于系统网端趋势统计任务，只展示统计任务完成最新时间的数据。
									<br />如统计任务停止或者异常未继续执行，趋势图只会展示最近完成统计任务时间的数据，则趋势图展示的时间不再增加。
									<br />趋势图固定为10分钟一个数据点，不足10分钟的查询时间则取舍展示。 <br />趋势图数据为网端下所有组件10分钟内值的总数/平均值。
								</template>
								<svg-icon icon-class="question" style="color: #fff"></svg-icon>
							</el-tooltip>
						</span>
						<div class="table-export-btn">
							<el-button
								v-show="!noDataFlag.alarmReqCount"
								type="text"
								style="float: right; margin-right: 100px; color: #ffffff"
								@click="targetToAlarmReqCountDetail"
							>
								查看详情
								<el-icon :size="14"><ArrowRight /></el-icon>
							</el-button>
						</div>
					</div>
					<div id="alarmReqCountTrendChartId" style="height: 250px"></div>
				</div>
			</el-col>
		</el-row>

		<el-row v-loading="loading.networkMetaDataChart" :gutter="10" style="margin-bottom: 10px">
			<!-- CPU使用率、内存使用率、磁盘IO趋势 -->
			<el-col :span="12">
				<div class="component-box">
					<div class="system-health-title" style="margin-top: 10px">
						<div class="circle"></div>
						<span class="title-label">CPU使用率、内存使用率、磁盘IO趋势</span>
					</div>
					<div id="networkMetaDataChartId" style="height: 250px"></div>
				</div>
			</el-col>
			<!-- 流量变化趋势 -->
			<el-col :span="12">
				<div class="component-box">
					<div class="system-health-title yd-flex" style="margin-top: 10px">
						<div>
							<div class="circle"></div>
							<span class="title-label">流量变化趋势</span>
						</div>
						<div class="yd-flex" style="padding: 0 30px; margin-bottom: 0px">
							<span></span>
							<el-tooltip effect="light" :z-index="9999">
								<span style="z-index: 9999">历史峰值：{{ flowPeek.requestCount }}</span>
								<template #content>
									<p>历史峰值：{{ flowPeek.num }}</p>
									<p>发生时间：{{ flowPeek.beginTime }} - {{ flowPeek.endTime }}</p>
								</template>
							</el-tooltip>
						</div>
					</div>
					<div id="flowTrendChartId" style="height: 250px"></div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="NetworkDetail" lang="tsx">
import { ref, reactive, onMounted, getCurrentInstance, nextTick, shallowRef } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts';
import ydItRoad from '@/components/YdItRoad/index.vue';
import { GraphData, GraphCustomOptionsType } from '@/components/YdItRoad/itRoad-type';
import { noDataOption } from '@/utils/defaultChartConfig';
import { resizeMixins } from '@/mixins/resize';
import { toDecimalFormate, downloadFromBlob, mergeTrendData, mapFilter, formatBytes } from '@/utils/common';
import { queryOverviewRoad, updateSegmentPosition, queryIndicatorTrend } from '@/api/bpm/segment/segment_overview';
import {
	queryComponentDetailList,
	exportComponentDetail,
	queryNetworkMetaDataDetailList,
	queryNetworkMetaDataTrend,
	exportNetworkDetail,
	queryNetworkMetaDatalTop,
} from '@/api/bpm/network-detail/index';
import { flowTrendList } from '@/api/bpm/cockpit/index';
import { queryNetworkDetailList } from '@/api/bpm/home/all_it_road';

const instance = getCurrentInstance();
const proxy = instance?.proxy;

let route = useRoute();
const router = useRouter();

// 搜索表单数据
let formData = reactive<FormModelType>({});
// 表单配置

const formOptions = ref<FormOptionType>([
	{
		type: 'select',
		prop: 'systemId',
		label: '业务系统',
		placeholder: '请选择业务系统',
		api: {
			name: 'queryAppSystemOptions',
			params: { isStatus: 1 },
			// params: {},
		},
	},
	{
		type: 'date-picker',
		label: '',
		prop: 'dateRange',
		dateType: 'datetimerange',
		enableCrossDay: true,
		// shortcutsKeys: ['last1h', 'today', 'lastDay'],
		// defaulShortcutsKey: 'lastlh',
	},
]);

let ydItRoadRef = shallowRef<InstanceType<typeof ydItRoad>>();

// 组件详情表格配置
let componentConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '网端名称',
			prop: 'segmentName',
		},
		{
			label: '组件Ip端口',
			prop: 'componentIp',
		},
		{
			label: '请求量',
			prop: 'reqCount',
			sortable: true,
		},
		{
			label: '平均响应时长',
			prop: 'serverAvgResponseTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '平均处理耗时',
			prop: 'avgDealTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '平均传输耗时',
			prop: 'serverAvgTranslateTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '告警请求量',
			prop: 'alarmReqCount',
			sortable: true,
			operation: [
				{
					rowKey: 'alarmReqCount',
					color: '#ff9a0c',
					handler: (scope) => {
						jumpToBaseAlarm(scope.row, undefined);
					},
				},
			],
		},
		{
			label: '失败请求量',
			prop: 'failReqCount',
			sortable: true,
			operation: [
				{
					rowKey: 'failReqCount',
					color: '#fe5578',
					handler: (scope) => {
						jumpToBaseAlarm(scope.row, [0]);
					},
				},
			],
		},
		{
			label: '成功率',
			prop: 'successRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row, val) {
				return val + '%';
			},
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 组件详情表格数据
let componentData = reactive({
	data: [],
});

// 网络详情表格配置
let networkDetailConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '网端名称',
			prop: 'segmentName',
		},
		{
			label: 'IP端口',
			prop: 'responseIp',
			formatter(row: any, val: any) {
				return row.responseIp + ':' + row.responsePort;
			},
		},
		{
			label: '健康度',
			prop: 'healthRate',
			sortable: true,
			formatter(row: any, val: any) {
				// return row
				return val + '%';
			},
		},
		{
			label: '字节数(总数/发送/接收)',
			prop: 'serverAvgResponseTime',
			sortable: true,
			formatter(row: any) {
				return `${row.totalBytes}/${row.totalRequestBytes}/${row.totalResponseBytes}`;
			},
		},
		{
			label: '总包数',
			prop: 'totalPackets',
			sortable: true,
		},
		{
			label: '响应数',
			prop: 'totalResponseNums',
			sortable: true,
		},
		{
			label: '响应耗时',
			prop: 'avgServerResponseTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '会话数',
			prop: 'totalNewSessionsNums',
			sortable: true,
		},
		{
			label: '链接失败会话数',
			prop: 'totalConnectFail',
			sortable: true,
		},
		{
			label: '建链耗时',
			prop: 'avgConnectTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '网络传输耗时',
			prop: 'avgNetworkTime',
			sortable: true,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: '零窗口数',
			prop: 'totalWindowEvents',
			sortable: true,
		},
		{
			label: '重置包数',
			prop: 'totalResetPackets',
			sortable: true,
		},
		{
			label: '重传包数',
			prop: 'totalRetryPackets',
			sortable: true,
		},
		{
			label: 'SSL告警会话数',
			prop: 'totalSslAlertCount',
			sortable: true,
		},
		{
			label: '告警会话数',
			prop: 'totalAlarmCount',
			sortable: true,
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 表格数据
let networkDetailData = reactive({
	data: [],
});

// 网元详情表格配置
let networkMetaDataDetailConfig = reactive<TableConfigType>({
	columns: [
		{
			label: 'IP地址',
			prop: 'agentIp',
		},
		{
			label: 'CPU使用率',
			prop: 'cpuRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '内存使用率',
			prop: 'memoryRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '磁盘IO',
			prop: 'diskRate',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '%';
			},
		},
		{
			label: '系统负载',
			prop: 'sysWork',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '秒';
			},
		},
		{
			label: '磁盘smart',
			prop: 'diskSmart',
			sortable: true,
			formatter(row: any, value: any) {
				return value + '秒';
			},
		},
		{
			label: '网卡流量',
			prop: 'networkFlow',
			sortable: true,
			formatter(row: any, value: any) {
				return formatBytes(value);
			},
		},
	],
	loading: false,
	disableOrderNumber: true,
	pagination: {
		pageNum: 1,
	},
});
// 网元详情表格数据
let networkMetaDataDetailData = reactive({
	data: [],
});

// 网元数据历史峰值
const networkMetaDataPeek = ref<anyObj>({
	cpuRate: 0,
	memoryRate: 0,
	diskRate: 0,
});

// 流量历史峰值
let flowPeek = ref<anyObj>({});

// 图表统一样式
let chartStyle = reactive({
	// 基础
	common: {
		// 全局字体样式
		textStyle: {
			color: '#ffffff',
		},
		// 调色盘
		color: ['#ff9a0c', '#2beded', '#6d51f5'],
	},
	// 图例统一样式
	legendStyle: {
		itemWidth: 40,
		itemGap: 20,
		textStyle: {
			color: '#ffffff',
		},
	},
	// X轴统一样式
	xAxisStyle: {
		// X坐标轴样式
		axisLine: {
			lineStyle: {
				color: '#ffffff',
			},
		},
		// X轴刻度样式
		axisTick: {
			show: false,
		},
	},
	// Y轴统一样式
	yAxisStyle: {
		// Y坐标轴样式
		axisLine: {
			show: false,
		},
		// Y轴刻度样式
		axisTick: {
			show: false,
		},
		// 分隔线样式
		splitLine: {
			lineStyle: {
				opacity: 0.2,
			},
		},
		// 最小间隔(保证整数)
		minInterval: 1,
	},
	// 无数据时统一样式
});
let itRoadMode = ref('default');

// it路径图是否加载完成
let isGraphLoad = ref(false);
// it路径图
let itRoad = reactive<Record<string, GraphCustomOptionsType>>({
	customOptions: {
		layout: {
			type: 'dagre',
			rankdir: 'LR',
			nodesep: 40,
			ranksep: 80,
		},
		modes: {
			// 默认模式
			defaultMode: [
				// 节点高亮(自定义)
				'activate-node',
				'drag-canvas',
			],
		},
		// 工具按钮
		toolbarObj: {
			getContent: () => {
				console.log('toolbox---');
				let outDiv = document.createElement('div');
				outDiv.style.width = '120px';
				outDiv.innerHTML = `
				  <ul>
					<li code="edit">
					  <svg class="svg-icon" aria-hidden="true"  >
						<use  id="iconEditId" xlink:href="#icon-itRoad-edit" fill="#ffffff" />
					  </svg>
					</li>
				  </ul>
				  `;

				return outDiv;
			},
			handleClick: (code: string, _graph: any) => {
				if (code === 'edit') {
					if (itRoadMode.value === 'default') {
						itRoadMode.value = 'edit';
						document.getElementById('iconEditId')!.setAttribute('fill', '#2beded');
					} else {
						itRoadMode.value = 'default';
						document.getElementById('iconEditId')!.setAttribute('fill', '#ffffff');
					}
					ydItRoadRef.value?.setGraphMode(itRoadMode.value);
				}
			},
		},
	},
});

// 图表对象
let chart: anyObj = {
	reqCountTrendChart: null,
	failReqCountTrendChart: null,
	alarmReqCountTrendChart: null,
	avgResponseTimeTrendChart: null,
	flowTrendChart: null,
	networkMetaDataChart: null,
};
// 是否无数据(无数据时不显示查看详情按钮)
let noDataFlag = reactive({
	failReqCount: false,
	alarmReqCount: false,
});
// 加载层
let loading = reactive({
	segmentOverviewItRoad: false,
	segmentIndicatorTrendChart: false,
	componentExportLoading: false,
	networkDetailExportLoading: false,
	networkMetaDataDetailExportLoading: false,
	networkMetaDataChart: false,
	flowTrend: false,
});

// disable
let disable = reactive<anyObj>({
	componentExportDisable: false,
	networkDetailExportDisable: false,
	networkMetaDataDetailExportDisable: false,
});

// 导出按钮
let downloadStartTime = ref('');
let downloadEndTime = ref('');

let nodeList: GraphData = {
	nodes: [],
	edges: [],
};
resizeMixins(chart);
initQuery(route.query, formData);
onMounted(() => {
	// 初始化图表
	chart.reqCountTrendChart = echarts.init(document.getElementById('reqCountTrendChartId') as HTMLElement);
	chart.failReqCountTrendChart = echarts.init(document.getElementById('failReqCountTrendChartId') as HTMLElement);
	chart.alarmReqCountTrendChart = echarts.init(document.getElementById('alarmReqCountTrendChartId') as HTMLElement);
	chart.avgResponseTimeTrendChart = echarts.init(document.getElementById('avgResponseTimeTrendChartId') as HTMLElement);
	chart.networkMetaDataChart = echarts.init(document.getElementById('networkMetaDataChartId') as HTMLElement);
	chart.flowTrendChart = echarts.init(document.getElementById('flowTrendChartId') as HTMLElement);
});

function graphInited() {
	isGraphLoad.value = true;
}

// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
		}
		console.log('try');
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
		console.log('catach----', formData);
	}
}

function formInit() {
	console.log('forminit');
	initQuery(route.query, formData);
	componentConfig.pagination!.pageNum = 1;
	searchHandler();
}

// 搜索事件
function searchHandler() {
	// 复原布局方式
	// ydItRoadRef.value?.setLayout(itRoad.customOptions.layout);

	// 渲染网端总览路径图
	renderSegmentOverviewRoad().then(() => {
		console.log('renderSegmentOverviewRoad2122');
		queryComponentDetail();
		renderChart();
		queryFlowTrendData();
		queryNetworkDetail();
		queryNetworkMetaDataDetail();
		getNetworkMetaDataTrend();
		getNetworkMetaDatalTop();
	});
}
// 渲染网端总览路径图
function renderSegmentOverviewRoad() {
	loading.segmentOverviewItRoad = true;
	console.log('renderSegmentOverviewRoad', formData);
	return new Promise((resolve, reject) => {
		queryOverviewRoad(formData).then((res: ApiResponse) => {
			let d: GraphData = {
				nodes: [],
				edges: [],
			};

			if (res.code !== 0 || !res.data?.length) {
				// 无数据
				noDataFlag.failReqCount = true;
				noDataFlag.alarmReqCount = true;
				chart.reqCountTrendChart.clear();
				chart.failReqCountTrendChart.clear();
				chart.alarmReqCountTrendChart.clear();
				chart.avgResponseTimeTrendChart.clear();
				noDataOption(chart.reqCountTrendChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				noDataOption(chart.alarmReqCountTrendChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				noDataOption(chart.avgResponseTimeTrendChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				noDataOption(chart.failReqCountTrendChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				noDataOption(chart.networkMetaDataChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				noDataOption(chart.flowTrendChart, {
					textStyle: { color: '#fff', formatter: '暂无告警数据' },
				});
				ydItRoadRef.value?.loadItRoadData(d);
				disable.componentExportDisable = true;
				loading.segmentOverviewItRoad = false;

				return;
			}

			// 是否保存位置
			let isSavePos = true;
			formatGraphData(res.data);
			function formatGraphData(arr: any[], idKey = 'id') {
				if (arr instanceof Array === false) {
					console.error('arr不是数组---------');
					return;
				}
				arr.forEach((node: any) => {
					node.id = node.id + '';
					node.SegmentName = node.SegmentName || '- -';

					if (node.locationX) {
						// 采用自定义布局
						isSavePos = false;
						// ydItRoadRef.value?.setLayout({
						// 	type: 'segmentOverviewLayout',
						// });
					}

					let index = d.nodes.findIndex((n) => n.id === node.id);
					// 没有的节点才加进去
					if (index === -1) {
						// 设置x、y坐标
						node.x = node.locationX;
						node.y = node.locationY;
						d.nodes.push(node);
					}
					if (node.childNodes instanceof Array) {
						node.childNodes.forEach((subNode: any) => {
							d.edges.push({
								source: node[idKey] + '',
								target: subNode[idKey] + '',
							});
						});
						formatGraphData(node.childNodes);
					}
				});
			}

			// 判断是否保存网端位置
			if (isSavePos) {
				let nodes = ydItRoadRef.value?.getAllNodes();
				nodes.forEach((node: anyObj) => {
					let model = node.getModel();
					updateSegmentPos(null, {
						segmentId: model.id,
						locationX: model.x,
						locationY: model.y,
					});
				});
			} else {
				// 设置布局
				ydItRoadRef.value?.setLayout({
					type: 'segmentOverviewLayout',
				});
			}
			console.log('loadData--------------');

			let timer = setInterval(() => {
				// 等it路径图加载完了才去加载数据
				if (isGraphLoad.value) {
					ydItRoadRef.value?.loadItRoadData(d);
					clearInterval(timer);
					loading.segmentOverviewItRoad = false;
					1;
				}
			}, 50);

			nodeList = d;

			if (d.nodes.length > 0) {
				if (!formData.segmentId) {
					// 如果没有segmentId需要初始化
					for (let k of d.nodes) {
						if (k.reqSumIsZero === 1) {
							// 请求量不为0
							formData.segmentId = k.id;
							break;
						}
					}
				}

				if (formData.segmentId !== undefined) {
					resolve('');
				} else {
					disable.componentExportDisable = true;
					componentConfig.loading = false;
					componentData.data = [];
					componentConfig.pagination!.total = 0;
					chart.reqCountTrendChart.clear();
					for (let key in chart) {
						handleChartNoData(chart[key]);
					}
				}
			}
		});
	});
}

// 图表没有数据
function handleChartNoData(chart: object, formattertext = '暂无告警数据') {
	if (chart) {
		noDataOption(chart, {
			textStyle: { color: '#fff', formatter: formattertext },
		});
	}
}

// 双击网端事件
function dblclickNode(ev: any) {
	const nodes = ydItRoadRef.value?.getAllNodes();
	nodes.forEach((node: any) => {
		const nodeModel = JSON.parse(JSON.stringify(node.getModel()));
		if (ev.item.getModel().id === nodeModel.id) {
			nodeModel.style.fill = '#1c2d46';
			node.update(nodeModel);
		} else {
			nodeModel.style.fill = '';
			node.update(nodeModel);
		}
	});
	ydItRoadRef.value?.loadItRoadData(nodeList);
	// 渲染图表
	if (ev.item._cfg.type === 'node') {
		formData.segmentId = ev.item.getModel().id;
		renderChart();
		queryComponentDetail();
		queryFlowTrendData();
		queryNetworkDetail();
		queryNetworkMetaDataDetail();
		getNetworkMetaDataTrend();
		getNetworkMetaDatalTop();
	}
}
// 请求组件详情接口
function queryComponentDetail() {
	componentConfig.loading = true;
	downloadStartTime.value = formData.startTime;
	downloadEndTime.value = formData.endTime;

	queryComponentDetailList(formData).then((res: ApiResponse) => {
		componentConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		componentData.data = res.data.data;
		componentConfig.pagination!.total = res.data.total;
		disable.componentExportDisable = res.data.total <= 0;
	});
}

// 请求网络详情接口
function queryNetworkDetail() {
	networkDetailConfig.loading = true;
	downloadStartTime.value = formData.startTime;
	downloadEndTime.value = formData.endTime;

	queryNetworkDetailList(formData).then((res: ApiResponse) => {
		networkDetailConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		networkDetailData.data = res.data.data;
		networkDetailConfig.pagination!.total = res.data.total;
		disable.networkDetailExportDisable = res.data.total <= 0;
	});
}

// 请求网元详情接口
function queryNetworkMetaDataDetail() {
	networkMetaDataDetailConfig.loading = true;
	queryNetworkMetaDataDetailList(formData).then((res: ApiResponse) => {
		networkMetaDataDetailConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}

		networkMetaDataDetailData.data = res.data.records;
		networkMetaDataDetailConfig.pagination!.total = res.data.total;
		disable.networkMetaDataDetailExportDisable = res.data.total <= 0;
	});
}

// 渲染图表
function renderChart() {
	loading.segmentIndicatorTrendChart = true;
	// 查询网端指标趋势
	queryIndicatorTrend(formData).then((res: ApiResponse) => {
		loading.segmentIndicatorTrendChart = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		let d = res.data.trendData;
		let labelTimeArr = [],
			allLabelTimeArr = [],
			reqCountArr = [],
			failReqCountArr = [],
			alarmReqCountArr = [],
			avgDealTimeArr = [],
			reqCountWeekArr = [],
			reqCountMonthArr = [],
			failReqCountHighArr = [],
			failReqCountLowArr = [],
			alarmReqCountHighArr = [],
			alarmReqCountLowArr = [],
			avgDealTimeHighArr = [],
			avgDealTimeLowArr = [];
		// healthHighArr = [],
		// healthLowArr = [];

		if (d.sitVoList && d.sitVoList.length > 0) {
			let config = {
				data: d.sitVoList,
				startTime: res.data.trendStartTime,
				endTime: res.data.trendEndTime,
				isLastShow: res.data.lastShow,
				fields: [{ name: 'reqCount' }, { name: 'failReqCount' }, { name: 'alarmReqCount' }, { name: 'avgDealTime' }],
				scale: 10,
				cycleTimeKey: 'labelTime',
			};
			let list = mergeTrendData(config);
			labelTimeArr = list.resLabelTimeArr;
			allLabelTimeArr = list.allResLabelTimeArr;
			reqCountArr = list.resFieldMap.reqCountArr;
			failReqCountArr = list.resFieldMap.failReqCountArr;
			alarmReqCountArr = list.resFieldMap.alarmReqCountArr;
			avgDealTimeArr = list.resFieldMap.avgDealTimeArr;
		}
		// reqCountHisVoList
		if (d.reqCountHisVoList && d.reqCountHisVoList.length > 0) {
			console.log('d.reqCountHisVoList', d.reqCountHisVoList);
			let config1 = {
				data: d.reqCountHisVoList,
				startTime: res.data.trendStartTime,
				endTime: res.data.trendEndTime,
				isLastShow: res.data.lastShow,
				fields: [{ name: 'indicator' }, { name: 'indicatorValueMonth' }, { name: 'indicatorValueWeek' }],
				scale: 10,
				cycleTimeKey: 'labelTime',
			};
			let list1 = mergeTrendData(config1);
			reqCountWeekArr = list1.resFieldMap.indicatorValueWeekArr;
			reqCountMonthArr = list1.resFieldMap.indicatorValueMonthArr;
		}

		if (d.failReqCountHisVoList && d.failReqCountHisVoList.length > 0) {
			let config2 = {
				data: d.failReqCountHisVoList,
				startTime: res.data.trendStartTime,
				endTime: res.data.trendEndTime,
				isLastShow: res.data.lastShow,
				fields: [{ name: 'indicatorValueMax' }, { name: 'indicatorValueMin' }],
				scale: 10,
				cycleTimeKey: 'labelTime',
			};
			let list2 = mergeTrendData(config2);
			failReqCountHighArr = list2.resFieldMap.indicatorValueMaxArr;
			failReqCountLowArr = list2.resFieldMap.indicatorValueMinArr;
		}

		if (d.alarmReqCountHisVoList && d.alarmReqCountHisVoList.length > 0) {
			let config3 = {
				data: d.alarmReqCountHisVoList,
				startTime: res.data.trendStartTime,
				endTime: res.data.trendEndTime,
				isLastShow: res.data.lastShow,
				fields: [{ name: 'indicatorValueMax' }, { name: 'indicatorValueMin' }],
				scale: 10,
				cycleTimeKey: 'labelTime',
			};
			let list3 = mergeTrendData(config3);
			alarmReqCountHighArr = list3.resFieldMap.indicatorValueMaxArr;
			alarmReqCountLowArr = list3.resFieldMap.indicatorValueMinArr;
		}

		if (d.avgDealTimeHisVoList && d.avgDealTimeHisVoList.length > 0) {
			let config4 = {
				data: d.avgDealTimeHisVoList,
				startTime: res.data.trendStartTime,
				endTime: res.data.trendEndTime,
				isLastShow: res.data.lastShow,
				fields: [
					{ name: 'indicatorValueMax' },
					{ name: 'indicatorValueMin' },
					{
						name: 'indicatorValueMax1',
						calculate: (map: any, i: any) => {
							let indicatorValueMax = map.indicatorValueMaxArr[i];

							let indicatorValueMax1 = Number((indicatorValueMax / 1000).toFixed(2));
							if (typeof indicatorValueMax1 !== 'number') {
								indicatorValueMax1 = 0;
							}
							return indicatorValueMax1;
						},
					},

					{
						name: 'indicatorValueMin1',
						calculate: (map: any, i: any) => {
							let indicatorValueMin = map.indicatorValueMinArr[i];

							let indicatorValueMin1 = Number((indicatorValueMin / 1000).toFixed(2));
							if (typeof indicatorValueMin1 !== 'number') {
								indicatorValueMin1 = 0;
							}
							return indicatorValueMin1;
						},
					},
				],
				scale: 10,
				cycleTimeKey: 'labelTime',
			};
			let list4 = mergeTrendData(config4);
			avgDealTimeHighArr = list4.resFieldMap.indicatorValueMax1Arr;
			avgDealTimeLowArr = list4.resFieldMap.indicatorValueMin1Arr;
		}

		// 渲染趋势图
		renderReqCountTrendChart({
			labelTimeArr: allLabelTimeArr,
			reqCountArr,
			reqCountMonthArr,
			reqCountWeekArr,
		});
		renderFailReqCountTrendChart({
			labelTimeArr,
			failReqCountArr,
			failReqCountHighArr,
			failReqCountLowArr,
		});
		renderAlarmReqCountTrendChart({
			labelTimeArr,
			alarmReqCountArr,
			alarmReqCountHighArr,
			alarmReqCountLowArr,
		});
		renderAvgResponseTimeTrendChart({
			labelTimeArr,
			avgDealTimeArr,
			avgDealTimeHighArr,
			avgDealTimeLowArr,
		});
	});
}
// 渲染请求量趋势图
function renderReqCountTrendChart(o: anyObj) {
	chart.reqCountTrendChart.clear();
	// 无数据
	if (o.labelTimeArr.length <= 0) {
		noDataOption(chart.reqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	if (o.reqCountArr.length <= 0 && o.reqCountHighArr.length <= 0 && o.reqCountLowArr.length <= 0) {
		noDataOption(chart.reqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	// 有数据
	chart.reqCountTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['当前值', '周平均', '月平均'],
			itemWidth: 40,
			itemHeight: 10,
			itemGap: 20,
			textStyle: {
				color: '#ffffff',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 数据
		series: [
			{
				name: '当前值',
				type: 'line',
				data: o.reqCountArr,
			},
			{
				name: '周平均',
				type: 'line',
				data: o.reqCountWeekArr,
			},
			{
				name: '月平均',
				type: 'line',
				data: o.reqCountMonthArr,
			},
		],
	});
}
// 渲染失败请求量趋势图
function renderFailReqCountTrendChart(o: any) {
	chart.failReqCountTrendChart.clear();
	// 无数据
	if (o.labelTimeArr.length <= 0) {
		noDataFlag.failReqCount = true;
		noDataOption(chart.failReqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	if (o.failReqCountArr.length <= 0 && o.failReqCountHighArr.length <= 0 && o.failReqCountLowArr.length <= 0) {
		noDataFlag.failReqCount = true;
		noDataOption(chart.failReqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	// 有数据
	noDataFlag.failReqCount = false;
	chart.failReqCountTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['高点', '当前值', '低点'],
			itemWidth: 40,
			itemHeight: 10,
			itemGap: 20,
			textStyle: {
				color: '#ffffff',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 数据
		series: [
			{
				name: '高点',
				type: 'line',
				data: o.failReqCountHighArr,
				//smooth: true
			},
			{
				name: '当前值',
				type: 'line',
				data: o.failReqCountArr,
				//smooth: true
			},
			{
				name: '低点',
				type: 'line',
				data: o.failReqCountLowArr,
				//smooth: true
			},
		],
	});
}
// 渲染告警请求量趋势图
function renderAlarmReqCountTrendChart(o: any) {
	chart.alarmReqCountTrendChart.clear();
	// 无数据
	if (o.labelTimeArr.length <= 0) {
		noDataFlag.alarmReqCount = true;
		noDataOption(chart.alarmReqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	if (o.alarmReqCountArr.length <= 0 && o.alarmReqCountHighArr.length <= 0 && o.alarmReqCountLowArr.length <= 0) {
		noDataFlag.alarmReqCount = true;
		noDataOption(chart.alarmReqCountTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	// 有数据
	noDataFlag.alarmReqCount = false;
	chart.alarmReqCountTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['高点', '当前值', '低点'],
			itemWidth: 40,
			itemHeight: 10,
			itemGap: 20,
			textStyle: {
				color: '#ffffff',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 数据
		series: [
			{
				name: '高点',
				type: 'line',
				data: o.alarmReqCountHighArr,
				//smooth: true
			},
			{
				name: '当前值',
				type: 'line',
				data: o.alarmReqCountArr,
				//smooth: true
			},
			{
				name: '低点',
				type: 'line',
				data: o.alarmReqCountLowArr,
				//smooth: true
			},
		],
	});
}
// 渲染平均响应时长趋势图
function renderAvgResponseTimeTrendChart(o: any) {
	chart.avgResponseTimeTrendChart.clear();
	// 无数据
	if (o.labelTimeArr.length <= 0) {
		noDataOption(chart.avgResponseTimeTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	if (o.avgDealTimeArr.length <= 0 && o.avgDealTimeHighArr.length <= 0 && o.avgDealTimeLowArr.length <= 0) {
		noDataOption(chart.avgResponseTimeTrendChart, {
			textStyle: { color: '#fff', formatter: '暂无告警数据' },
		});
		return;
	}
	// 有数据
	chart.avgResponseTimeTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['高点', '当前值', '低点'],
			itemWidth: 40,
			itemHeight: 10,
			itemGap: 20,
			textStyle: {
				color: '#ffffff',
			},
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			...chartStyle.xAxisStyle,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
		},
		// 数据
		series: [
			{
				name: '高点',
				type: 'line',
				data: o.avgDealTimeHighArr,
			},
			{
				name: '当前值',
				type: 'line',
				data: o.avgDealTimeArr,
			},
			{
				name: '低点',
				type: 'line',
				data: o.avgDealTimeLowArr,
			},
		],
	});
}
// cpu使用率、内存使用率、磁盘IO趋势 网元信息峰值
const getNetworkMetaDatalTop = () => {
	queryNetworkMetaDatalTop(formData).then((res: ApiResponse) => {
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		networkMetaDataPeek.value = res.data || {};
	});
};

// cpu使用率、内存使用率、磁盘IO趋势 网元信息
const getNetworkMetaDataTrend = () => {
	loading.networkMetaDataChart = true;
	// const req = {
	// 	endTime: formData.endTime,
	// 	startTime: formData.startTime,
	// 	systemId: formData.systemId,
	// 	segmentId: formData.segmentId
	// };
	const req = {
		systemId: 3, //系统id
		startTime: '2023-07-03 10:45:00', //开始时间
		endTime: '2023-07-03 13:45:00', //结束时间
		pageSize: 10,
		pageNum: 1,
		segmentId: 2, //网端id
	};

	chart.networkMetaDataChart?.clear();
	queryNetworkMetaDataTrend(req)
		.then((res: ApiResponse) => {
			loading.networkMetaDataChart = false;
			// 清空数据
			if (res.code !== 0) {
				proxy?.$message.warning(res.msg);
				noDataOption(chart.networkMetaDataChart, {
					textStyle: { color: '#fff' },
				});
				return;
			}
			renderNetworkMetaDataTrend(res.data);
		})
		.catch(() => {
			loading.networkMetaDataChart = false;
		});
};

//cpu使用率、内存使用率、磁盘IO趋势 chart view
const renderNetworkMetaDataTrend = (data: any[]) => {
	const o: anyObj = {
		labelTimeArr: [],
		cpuRateTrend: [],
		memoryRateTrend: [],
		diskRateTrend: [],
	};
	data.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime);
		o.cpuRateTrend.push(item.cpuRate);
		o.memoryRateTrend.push(item.memoryRate);
		o.diskRateTrend.push(item.diskRate);
	});

	// 有数据时显示
	chart.networkMetaDataChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['cpu使用率', '内存使用率', '磁盘IO'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
			// splitNumber: 5,
			minInterval: 1,
		},
		// y轴
		yAxis: [
			{
				type: 'value',
				...chartStyle.yAxisStyle,
			},
			{
				type: 'value',
				...chartStyle.yAxisStyle,
				axisLabel: {
					formatter: '{value} %', // 在标签值后添加单位
				},
			},
		],
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: 'cpu使用率',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.cpuRateTrend,
				symbolSize: 5,
				yAxisIndex: 1,
			},
			{
				name: '内存使用率',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.memoryRateTrend,
				symbolSize: 5,
				yAxisIndex: 1,
			},
			{
				name: '磁盘IO',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.diskRateTrend,
				symbolSize: 5,
				yAxisIndex: 0,
			},
		],
	});
};

// 流量变化趋势数据
const queryFlowTrendData = () => {
	loading.flowTrend = true;
	const req = {
		// currentDate: formData.currentDate,
		endTime: formData.endTime,
		startTime: formData.startTime,
		systemId: formData.systemId,
	};
	chart.flowTrendChart?.clear();
	flowTrendList(req).then((res: ApiResponse) => {
		loading.flowTrend = false;

		// 清空数据
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			noDataOption(chart.flowTrendChart, {
				textStyle: { color: '#fff' },
			});
			return;
		}

		renderflowTrendChart(res.data.trendData);
		flowPeek.value = res.data.trendData?.flowPeak || {};
	});
};

//流量变化趋势图 chart view
const renderflowTrendChart = (obj: any) => {
	const o: anyObj = {
		labelTimeArr: [],
		flowTrendDay: [],
		flowTrendWeek: mapFilter(obj.flowTrendWeek, 'reqCount'),
		flowTrendMonth: mapFilter(obj.flowTrendMonth, 'reqCount'),
	};
	obj.flowTrendDay.forEach((item: anyObj) => {
		o.labelTimeArr.push(item.labelTime.substr(11, 5));
		o.flowTrendDay.push(item.reqCount);
	});

	// debugger;

	// 有数据时显示
	chart.flowTrendChart.setOption({
		// 全局统一样式
		...chartStyle.common,
		// 调色盘
		// color: ['#e93074', '#2beded', '#6d51f5', '#fe5578', '#ff7d4f'],
		// 标题
		title: {
			show: false,
		},
		// 提示框
		tooltip: {
			trigger: 'axis',
		},
		// 图例
		legend: {
			data: ['今日', '周平均', '月平均'],
			...chartStyle.legendStyle,
		},
		// x轴
		xAxis: {
			type: 'category',
			data: o.labelTimeArr,
			boundaryGap: false,
			...chartStyle.xAxisStyle,
			axisLabel: {
				showMaxLabel: true,
			},
			// splitNumber: 5,
			minInterval: 1,
		},
		// y轴
		yAxis: {
			type: 'value',
			...chartStyle.yAxisStyle,
			name: '单位：（M）',
		},
		// 坐标系位置
		grid: {
			...chartStyle.grid,
		},
		// 数据
		series: [
			{
				name: '今日',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendDay,
				symbolSize: 5,
			},
			{
				name: '周平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendWeek,
				symbolSize: 5,
			},
			{
				name: '月平均',
				type: 'line',
				lineStyle: {
					width: 2,
				},
				data: o.flowTrendMonth,
				symbolSize: 5,
			},
		],
	});
};

// 拖拽节点保存坐标
function updateSegmentPos(ev: any, model: any) {
	// 编辑模式启动情况下才更新网端位置
	if (itRoadMode.value === 'edit' || model) {
		let segmentPos = model || {
			segmentId: ev.item.getModel().id,
			locationX: ev.item.getModel().x,
			locationY: ev.item.getModel().y,
		};
		segmentPos.systemId = formData.systemId;
		if (segmentPos.locationX) {
			updateSegmentPosition(segmentPos);
		}
	}
}

// 跳转至基础告警归并分析
function targetToFailReqCountDetail() {
	console.log('formData.startTime', formData);
	router.push({
		path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
		query: {
			data: JSON.stringify({
				systemId: formData.systemId,
				segmentIds: [formData.segmentId],
				startTime: formData.startTime,
				endTime: formData.endTime,
				alarmStates: 0,
			}),
		},
	});
}
// 跳转至基础告警归并分析
function targetToAlarmReqCountDetail() {
	console.log('formData.startTime', formData);
	router.push({
		path: '/business-monitor/monitor-analysis/basic-alarm-merging-analysis',
		query: {
			data: JSON.stringify({
				systemId: formData.systemId,
				segmentIds: [formData.segmentId],
				startTime: formData.startTime,
				endTime: formData.endTime,
				alarmStates: 1,
			}),
		},
	});
}
// 跳转至基础告警查询
function jumpToBaseAlarm(row: any, alarmState: any) {
	let ipPortArr = row.componentIp.split(':');
	let data = JSON.stringify({
		systemId: formData.systemId,
		segmentIds: [Number(formData.segmentId)],
		startTime: formData.startTime,
		endTime: formData.endTime,
		alarmStates: alarmState,
		responseIp: ipPortArr[0],
		responsePort: ipPortArr[1],
	});
	router.push({
		path: '/business-monitor/monitor-query/base-alarm-list',
		query: {
			data,
		},
	});
}

// 组件详情--导出
function handleComponentExport() {
	if (componentConfig.pagination && componentConfig.pagination.total! > 0) {
		loading.componentExportLoading = true;
		let d = JSON.parse(JSON.stringify(formData));
		d.pageNum = undefined;
		d.pageSize = undefined;
		if (componentData.data[0]) {
			d.systemName = (componentData.data[0] as anyObj).systemName;
			d.segmentName = (componentData.data[0] as anyObj).segmentName;
		}

		d.startTime = downloadStartTime.value;
		d.endTime = downloadEndTime.value;
		exportComponentDetail(d).then((res) => {
			downloadFromBlob(
				res,
				'',

				'组件详情列表_' + d.startTime.replace(/\D/g, '') + '-' + d.endTime.replace(/\D/g, '') + '.xlsx'
			).then((o: any) => {
				loading.componentExportLoading = false;
				if (!o.flag) {
					proxy?.$message.warning(o.msg);
				}
			});
		});
	}
}

// 网络详情--导出
function handleNetworkDetailExport() {
	if (networkDetailConfig.pagination && networkDetailConfig.pagination.total! > 0) {
		loading.networkDetailExportLoading = true;
		let d = JSON.parse(JSON.stringify(formData));
		d.pageNum = undefined;
		d.pageSize = undefined;
		if (networkDetailData.data[0]) {
			d.systemName = (networkDetailData.data[0] as anyObj).systemName;
			d.segmentName = (networkDetailData.data[0] as anyObj).segmentName;
		}

		d.startTime = downloadStartTime.value;
		d.endTime = downloadEndTime.value;
		exportNetworkDetail(d).then((res: ApiResponse) => {
			downloadFromBlob(
				res,
				'',

				'组件详情列表_' + d.startTime.replace(/\D/g, '') + '-' + d.endTime.replace(/\D/g, '') + '.xlsx'
			).then((o: any) => {
				loading.componentExportLoading = false;
				if (!o.flag) {
					proxy?.$message.warning(o.msg);
				}
			});
		});
	}
}

//网元详情--导出
function handleNetworkMetaDataDetailExport() {
	if (networkMetaDataDetailConfig.pagination && networkMetaDataDetailConfig.pagination.total! > 0) {
		loading.networkMetaDataDetailExportLoading = true;
		let d = JSON.parse(JSON.stringify(formData));
		d.pageNum = undefined;
		d.pageSize = undefined;
		if (networkMetaDataDetailData.data[0]) {
			d.systemName = (networkMetaDataDetailData.data[0] as anyObj).systemName;
			d.segmentName = (networkMetaDataDetailData.data[0] as anyObj).segmentName;
		}

		d.startTime = downloadStartTime.value;
		d.endTime = downloadEndTime.value;
		exportComponentDetail(d).then((res) => {
			downloadFromBlob(
				res,
				'',

				'组件详情列表_' + d.startTime.replace(/\D/g, '') + '-' + d.endTime.replace(/\D/g, '') + '.xlsx'
			).then((o: any) => {
				loading.networkMetaDataDetailExportLoading = false;
				if (!o.flag) {
					proxy?.$message.warning(o.msg);
				}
			});
		});
	}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.segment-overview-container {
	.el-loading-mask {
		background-color: rgba(255, 255, 255, 0.3);
	}
	.road-container {
		min-height: 300px;
		margin-bottom: 10px;
		background-color: rgba(29, 39, 75, 0.31);
		border-radius: 4px;
	}
	.style-split-yd-card .el-card {
		background-color: rgba(29, 39, 75, 0.31);
	}

	.component-box {
		background-color: rgba(29, 39, 75, 0.31);
		border-radius: 15px;
		margin-bottom: 10px;
		.system-health-title {
			padding-top: 16px;
			display: flex;
			align-items: center;
		}
		.title-label {
			color: #ffffff;
			font-size: 18px;
			font-weight: bold;
		}
		.circle {
			display: inline-block;
			width: 8px;
			height: 8px;
			margin-left: 8px;
			margin-right: 8px;
			background-color: #2beded;
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
		}
		.table-export-btn {
			flex: 1;
			text-align: right;
			margin-right: 25px;
			.icon-cls {
				width: 20px;
				height: 20px;
				color: #00ffff;
			}
		}
	}
}
</style>
